<template>
  <div class="box-padding">
    <div>
      <span class="title">合格率</span>
    </div>
    <div class="chart" id="chart"></div>
  </div>
</template>

<script>
import Charts from '@jiaminghi/charts'
export default {
  name: '',
  data() {
    return {
      chart: null,
    }
  },
  props: {
    rate: {
      type: Number,
      default: 0,
    },
  },
  created() {},
  mounted() {},
  watch: {
    rate() {
      this.line()
    },
  },
  methods: {
    line() {
      this.chart = document.getElementById('chart')
      const myChart = new Charts(this.chart)
      const option1 = {
        // title: {
        //   text: '合格率',
        //   offset: [-20, -20],
        //   style: {
        //     fill: '#fff',
        //     fontWeight: 'normal',
        //     fontSize: 18,
        //   },
        // },
        series: [
          {
            type: 'gauge',
            startAngle: -Math.PI / 2,
            endAngle: Math.PI * 1.5,
            arcLineWidth: 10,
            center: ['50%', '55%'], //设置图标的中心点（水平，垂直方向的距离）
            data: [
              {
                name: '合格率',
                value: this.rate,
                gradient: ['#03c2fd', '#1ed3e5', '#2fded6'],
                // gradient: ['#03c2fd'],
              },
            ],
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            pointer: {
              show: false,
            },
            dataItemStyle: {
              lineCap: 'round',
            },
            backgroundArc: {
              style: {
                fill: '#999',
                opacity: 0.2,
              },
            },
            details: {
              show: true,
              formatter: '{value}%',
              style: {
                fill: '#fff',
                // fill: '#1ed3e5',
                fontSize: 20,
                fontWeight: 'normal',
              },
            },
          },
        ],
      }
      myChart.setOption(option1)
      // //图表自适应
      window.addEventListener('resize', function() {
        myChart.resize()
      })
    },
  },
}
</script>

<style scoped>
.chart {
  height: 28vh;
  width: 100%;
}
.title {
  font-size: 14px;
  position: absolute;
  right: 10%;
  top: 15px;
  color: #ddd;
}
</style>
